<template>
    <!-- <ul class="list">
        <li v-for="list in menus" v-bind:key='list.menuName'>
            <img v-bind:src="list.menuIconUrl" alt="">
            <span class="menusName">{{list.menuName}}</span>
            <i class="fa fa-close"></i>
        </li>
    </ul> -->
    <div class="tab list">
      <div class="tabItem">
        <router-link to="/home" >
          <img src="./home.png" >
          <span>首页</span>
        </router-link>
      </div>
       <div class="tabItem"> 
        <router-link to="/order">
           <img src="./task.png" alt="">
          <span>订单</span>
        </router-link>
      </div>

       <div class="tabItem">
        <router-link to="/task">
          <span>任务</span>
            <img src="./tasks.png" alt="">
        </router-link>
      </div>

       <div class="tabItem">
        <router-link to="/mine">
            <img src="./min.png" alt="">
            <span>我的</span>
        </router-link>
      </div>

    </div>
</template>
<script>
export default {
  name: 'appFooter',
  data() {
    return {}
  },
  methods: {
    cls: function(ev) {
      // console.log(this.$route.path.split('/')[1])
      this.$refs.home.src = 'home_active.png'
    }
  }
}
</script>
<style lang="scss" scoped>
$em-base: 75;
@import '../../common/mixin/_bourbon.scss';
.list {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  height: rem(104px);
  background: #ffffff;
  width: 100%;
  .tabItem {
    position: relative;
    background: #faba15;
    img {
      height: rem(50px);
      width: rem(60px);
      top: 3px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      // display: block;
    }
    flex: 1;
    text-align: center;
    a {
      font-size: 16px;
      line-height: rem(154px);
      color: #ffffff;
      &.router-link-active {
        // color: #faba15;
      }
    }
  }
}
</style>

